<template>
    <div class="skill">
        <div class="contain">
            <span class="bar" :style="{widht:full>=0?'100%':'90%'}"></span>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from "vue";

export default defineComponent({
  props:{
      full:Number
  }
});
</script>

<style lang="stylus" scoped>
.skill{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index 50
}
.contain{
    width: 80%;
    height:10px; 
    position: relative;
    background:#e9e5e2;
    background-image: linear-gradient(to top, #e1ddd9, #e9e5e2);  
    border-radius:10px; 
}

.bar {
    transition: all .2s;
    position: absolute;
    left: 0px;
    top: 0px;
    width:80%;
    height: 8px;
    border-radius: 10px;
    box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
    background-color: #f674a4;
    background-image: linear-gradient(to top, #f674a4, #e06995);
    animation: wordpress .6s ease-out;
}
@keyframes wordpress {
    0% {
    width: 0px;
    }
    100% {
    width: 80%;
    }
}
</style>
